<template>
  <div class="container">

    <h1>测试wangeditor</h1>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
        @onChange="onChange"
      />
    </div>

    <!-- <el-button type="primary" size="default" @click="openWrite"
      >开始写入</el-button
    >
    <el-button type="primary" size="default" @click="openReader"
      >开始读取</el-button
    > -->

    <!--<img alt="Vue logo" src="./assets/logo.png">-->
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <!-- <encryption msg="Welcome to Your Vue.js App"/> -->
    <!-- // 第二步：使用组件 -->
    <!-- <lottie
      :options="defaultOptions"
      :height="200"
      :width="200"
      v-on:animCreated="handleAnimation"
    /> -->
    <!-- <div class="box" ref="box">
      <div class="top animate__animated animate__fadeInDown" style="width: 500px;height: 200px;background: red;position: absolute;top: 0;left: 40%;" ></div>
      <div class="left animate__animated animate__fadeInLeft" style="width: 200px;height: 500px;background: red;position: absolute;top: 40%;left: 0;"></div>
      <div class="bom animate__animated animate__fadeInUp" style="width: 500px;height: 200px;background: red;position: absolute;bottom: 0;left: 40%;"></div>
      <div class="right animate__animated animate__fadeInRight" style="width: 200px;height: 500px;background: red;position: absolute;top: 40%;right: 0;"></div>
    </div> -->
  </div>
</template>

<script>
// 测试wangEditor
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// var fs = require('fs')
// console.log(fs,'fsssssssssssssss');
// // import HelloWorld from './components/HelloWorld.vue'
// import Encryption from "./components/Encryption.vue";
// // 第一步：script中引入资源
// import * as animationData from "./assets/FeHelper-20220301113005.json";
// console.log(animationData,'animationData');

// 测试animate.css
// import 'animate.css';
// const fs = require("fs");
// import fs from 'fs'

export default {
  name: "App",
  components: {
    // Encryption,
    Editor,
    Toolbar,
  },
  props: {
    value: {
      type: String,
      default: '<p><br></p>'
    },
  },
  // 第三步：data里面添加相应属性
  data() {
    return {
      // list: [
      //   {
      //     ref: "1",
      //     src: require("../src/assets/粒子A_1.mp4"),
      //   },
      // ],

      editor: null,
      html: this.value,
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            base64LimitSize: 5 * 1024 * 1024,
          },
        },
      },
      mode: "simple", // or 'simple'
      // mode: "default", // or 'simple'

      // defaultOptions: { animationData: animationData.default },
      // animationSpeed: 1,
      // anim: {},
    };
  },
  mounted() {
    console.log(this.value, "this.value");
    console.log(1111);
    // console.log(this.$refs.box.style,'测试vue中拿dom');
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    // //   this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    //   console.log(this.value, 'this.value');
    // //   this.html = this.value;
    //   console.log(222);
    // }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },

  //第四步：定义方法
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      this.editor.updateView();
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml());
      this.$emit("input", editor.getHtml());
    },

    // 添加视频
    // add() {
    //   this.list.push({
    //     ref: "2",
    //     src: require("../src/assets/trailer.mp4"),
    //   });
    // },
    // handlerLast() {
    //   console.log(this.$refs["1"][0]);
    //   var vide = this.$refs["1"][0];
    //   if (vide.paused) {
    //     vide.play();
    //     vide.muted = false
    //   } else if (vide.play()) {
    //     vide.pause();
    //     vide.muted = true
    //   }
    // },
    // handlerNext() {
    //   console.log(this.$refs["2"][0]);
    //   var vide = this.$refs["2"][0];
    //   if (vide.paused) {
    //     vide.play();
    //     vide.muted = false
    //   } else if (vide.play()) {
    //     vide.pause();
    //     vide.muted = true
    //   }
    // },
    // 测试wangeditor
    // handleAnimation: function (anim) {
    //   this.anim = anim;
    //   console.log(anim); //这里可以看到 lottie 对象的全部属性
    // },
    // 开始写入
    // openReader() {
    //   console.log(fs,'');
    //   fs.readFile("./assets/log.txt", "utf8", function (err, datastr) {
    //     console.log("读取成功后的" + err);
    //     console.log("读取成功后的" + datastr);
    //   });
    // },
    // // 开始写入
    // openWrite() {
    //   let newStr = "这是newStr";
    //   fs.writeFile("./assets/log.txt", newStr, function (err) {
    //     // 读取失败 err的值也是为空  null转换为布尔值还是false
    //     if (err) {
    //       return console.log(err + "写入失败的");
    //     }
    //     console.log("成绩写入成功");
    //   });
    // },
  },
};
</script>

<style>

</style>
